<template>
  <div class="box">
    <!-- input输入框 -->
    <el-form class="topinput" label-width="80px">
      <el-form-item label="车型编号:">
        <el-input placeholder="请输入车型编号" />
      </el-form-item>
      <el-form-item label="应载重量:">
        <el-select v-model="form.Weight" placeholder="请选择应载重量">
          <el-option label="<1.8(吨)" value="aWeight" />
          <el-option label="1.8-6(吨)" value="bWeight" />
          <el-option label="6-14(吨)" value="cWeight" />
          <el-option label="14-30(吨)" value="dWeight" />
          <el-option label="30-50(吨)" value="eWeight" />
          <el-option label="50-100(吨)" value="fWeight" />
          <el-option label="100>(吨)" value="gWeight" />
        </el-select>
      </el-form-item>
      <el-form-item label="应载体积:">
        <el-select v-model="form.Volume" placeholder="请选择应载体积">
          <el-option label="<3(m³)" value="aVolume" />
          <el-option label="3-5(m³)" value="bVolume" />
          <el-option label="5-10(m³)" value="cVolume" />
          <el-option label="10-15(m³)" value="dVolume" />
          <el-option label="15-30(m³)" value="eVolume" />
          <el-option label="30-50(m³)" value="fVolume" />
          <el-option label="50-80(m³)" value="gVolume" />
          <el-option label="80-150(m³)" value="hVolume" />
          <el-option label="150>(m³)" value="iVolume" />
        </el-select>
      </el-form-item>
      <el-form-item label="车辆类型:">
        <el-input placeholder="请输入车辆类型" />

      </el-form-item>
      <el-button class="search">搜索</el-button>
      <el-button class="reset">重置</el-button>
    </el-form>
    <!-- 车型表格 -->
    <div class="form">
      <el-button class="btn" @click="addDialog">新增车型</el-button>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="no"
          label="序号"
          width="60"
        />
        <el-table-column
          prop="id"
          label="车型编号"
          width="224"
        />
        <el-table-column
          prop="name"
          label="车辆类型"
          width="158"
        />
        <el-table-column
          prop="num"
          label="车型数量"
          width="120"
        />
        <el-table-column
          prop="allowableLoad"
          label="应载重量（吨）"
          width="182"
        />
        <el-table-column
          prop="allowableVolume"
          label="应载体积（立方米）"
          width="182"
        />
        <el-table-column
          prop="measureLong"
          label="长（米）"
          width="120"
        />
        <el-table-column
          prop="measureWidth"
          label="宽（米）"
          width="120"
        />  <el-table-column
          prop="measureHigh"
          label="高（米）"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template>
            <el-button style="font-size:13px;color:blue" type="text" size="small" @click="addDialog">编辑</el-button>
            <span class="scopespan">|</span>
            <el-button style="font-size:13px;color:red" type="text" size="small" @click="dlttableData($event)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <add-dept :show-dialog.sync="showDialog" />
    </div>

  </div>
</template>

<script>
import { getImageCarType } from '@/api/user'
import addDept from './components/add-dept.vue'
export default {
  components: { addDept },
  data() {
    return {
      showDialog: false, // 控制弹层
      tableData: [], // 车型表格数据
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      form: {
        region: '',
        Weight: '',
        Volume: ''
      }
    }
  },
  created() {
    this.getImageCarType()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 获取车型列表数据
    async getImageCarType() {
      this.tableData = await getImageCarType()
      // console.log(this.tableData)
    },
    // 打开弹层
    addDialog() {
      this.showDialog = true
    },
    dlttableData() {
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 23px 20px 20px ;
}
.topinput{
  background-color: #fff;
  height: 140px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 20px;
  .el-form-item{
  padding-left: 10px;

  }
  .el-input{
    width: 339px;
    margin-right: 40px;
  }
}
.search{
 width: 90px;
 height: 40px;
 border-radius: 5px;
 background-color:#e2553b;
 color: #fff;
 margin-left: 30px;
}
.reset{
  width: 90px;
  height: 35px;
  border-radius: 5px;
  line-height: 10px;
}
.el-option{
  color: red !important;
}
.form{
  margin-top: 20px;
  padding: 28px;
  background-color: #fff;
  .btn{
     width: 90px;
 height: 40px;
 border-radius: 5px;
 background-color:#e2553b;
 color: #fff;
  margin-bottom: 20px;

  }
}
.el-select{
  width: 314px;
  margin-right: 20px;
}
.block{
  width: 465px;
  margin: auto;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.scopespan{
margin: 0 8px;
color: #dcdfe6;
}

</style>
